<style lang="less" scoped>
  .el-form-item {
    margin-bottom: 15px;
  }

  .form-location {
    /*width: 500px;margin: 10px auto*/
    width: 500px;
    margin-top: 10px;
    margin-left: 150px;
  }

  //头像上传
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<template>
  <section style="margin: 20px auto">
    <el-form style="" :model="myForm" :rules="rules" label-width="120px" ref="myForm" class="form-location">
      <el-form-item label="账户名称" prop="account">
        <el-input v-model="myForm.account" auto-complete="off" placeholder="请输入账户名称"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="myForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="客户姓名" prop="realName">
        <el-input v-model="myForm.realName" auto-complete="off" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="myForm.sex">
          <el-radio class="radio" :label="107002001">男</el-radio>
          <el-radio class="radio" :label="107002002">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="客户手机" prop="phone">
        <el-input v-model="myForm.phone" auto-complete="off" placeholder="请输入手机号码" :disabled=true></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="telephone">
        <el-input v-model="myForm.telephone" auto-complete="off" placeholder="请输入电话号码"></el-input>
      </el-form-item>
      <el-form-item label="邮件" prop="email">
        <el-input v-model="myForm.email" auto-complete="off" placeholder="请输入邮件"></el-input>
      </el-form-item>

      <el-form-item label="通信地址" prop="personalLocation">
        <address-select v-model="addressSelect"
                        placeholder="请选择地址"
                        class="f-w233" style="width: 100%"></address-select>
      </el-form-item>

      <el-form-item prop="street">
        <el-input auto-complete="off" v-model="myForm.street" placeholder="请输入详细地址"></el-input>
      </el-form-item>

      <el-form-item label="所属企业" prop="enterprise">
        <el-input v-model="myForm.enterprise" auto-complete="off" placeholder="请输入企业名称"></el-input>
      </el-form-item>
      <el-form-item label="事业合伙人" prop="partnerName">
        <el-input disabled v-model="myForm.partnerName" auto-complete="off"
                  placeholder="事业合伙人名称"></el-input>
      </el-form-item>
      <el-form-item label="合伙人邀请码" prop="partnerInvitationCode">
        <el-input v-model="myForm.partnerInvitationCode" auto-complete="off"
                  placeholder="请输入事业和伙人邀请码"></el-input>
        <el-button  type="primary" @click="checkPartner(myForm.partnerInvitationCode)"
                   style="float: right">检测
        </el-button>
      </el-form-item>
      <el-form-item label="上传头像" prop="currentHeadUrl">
        <el-upload
          class="avatar-uploader"
          action="/api/v1.0/admin/meb_users_head_picture_upload"
          :show-file-list="false"
          :on-error="handleAvatarError"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="oldHeadUrl && myForm.currentHeadUrl" :src="decodeURI(myForm.downloadHead + myForm.currentHeadUrl)"
               class="avatar">
          <img v-else-if="!oldHeadUrl && tempCurrentHeadUrl" :src="tempCurrentHeadUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="myForm.remark"></el-input>
      </el-form-item>

    </el-form>
    <div style="" class="form-location">
      <el-button type="primary" style="width: 120px;height: 50px;float: right"
                 @click="handleSubmit(myForm.partnerInvitationCode)" :loading="submitLoading">保存
      </el-button>
    </div>
  </section>
</template>

<script>
import {getUserByUserId, saveMemberUser, findByInviteCode} from '../../api/meb-user/PersonalDetails';
export default {
  data () {
    return {
      userId: this.$store.state.userId,
      token: this.$store.state.token,
      addressSelect: [], // 地址
      submitLoading: false,

      // 表单数据
      myForm: {
        'id': null,
        'account': null,
        'userName': null,
        'realName': null,
        'sex': null,
        'phone': null,
        'telephone': null,
        'email': null,
        'personalLocation': null,
        'enterprise': null,
        'partnerName': null,
        'partnerId': null,
        'partnerInvitationCode': null,
        'downloadHead': null,
        'currentHeadUrl': '',

        'country': null,
        'province': null, // 省
        'provinceId': null, // 省id
        'city': null, // 市
        'cityId': null, // 市id
        'county': null, // 县
        'countyId': null, // 县id
        'town': null, // 乡镇街道
        'townId': null, // 乡镇街道id
        'street': null
      },
      // 验证规则
      rules: {
        account: [
          {required: true, message: '请输入账户名称', trigger: 'blur'},
          {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
        ],
        realName: [
          {required: true, message: '请输入真实姓名', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别'}
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur'}
        ],

        partnerInvitationCode: [
          {required: true, message: '请输入合伙人邀请码', trigger: 'blur'},
          {min: 6, max: 6, message: '请输入合伙人邀请码', trigger: 'blur'}
        ]
      },

      // 临时显示图片
      oldHeadUrl: true,
      tempCurrentHeadUrl: ''
    };
  },
  methods: {
    // 获取表格数据
    getFormData () {
      this.listLoading = true;
      getUserByUserId(this.userId, this.token).then((res) => {
        if (res.data.successFlg === true && res.data.obj != null) {
          let formData = res.data.obj;
          this.myForm = formData;
          if (formData.provinceId !== '' && formData.provinceId != null && formData.provinceId !== undefined) {
            this.addressSelect = [formData.provinceId, formData.cityId, formData.countyId, formData.townId];
          }
        }
      });
    },
    // 检测是否有该合伙人
    checkPartner (id) {
      console.log(id);
      if (id === '' || id == null) {
        this.$message.error('请输入邀请码！');
        return;
      }
      ;
      findByInviteCode(id).then((res) => {
        if (res.data.obj !== null) {
          this.myForm.partnerName = res.data.obj.realName;
          this.myForm.partnerId = res.data.obj.id;
        } else {
          return this.$message.error('该邀请码不存在！');
        }
      });
    },
    addressValue (value) {
      if (value) {
        return value;
      } else {
        return null;
      }
    },
    // 提交修改
    handleSubmit (val) {
      if (val === '' || val == null) {
        return this.$message.error('请输入邀请码！');
      }
      ;
      findByInviteCode(val).then((res) => {
        if (res.data.obj !== null) {
          this.myForm.partnerName = res.data.obj.realName;
          this.myForm.partnerId = res.data.obj.id;
          this.myForm.provinceId = this.addressValue(this.addressSelect[0]);
          this.myForm.cityId = this.addressValue(this.addressSelect[1]);
          this.myForm.countyId = this.addressValue(this.addressSelect[2]);
          this.myForm.townId = this.addressValue(this.addressSelect[3]);
          // 表单验证
          this.$refs['myForm'].validate((valid) => {
            if (valid) {
              this.submitLoading = true;
              saveMemberUser(this.myForm).then((res) => {
                this.submitLoading = false;
                if (res.data.successFlg === true) {
                  this.myFormVisible = false;
                  this.$message.success('修改成功！');
                  this.getTableData();
                } else {
                  this.$message.error(res.data.errorMsg);
                }
              }).catch(function (error) {
                console.log(error);
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        } else {
          return this.$message.error('该邀请码不存在！');
        }
      });
    },

    // 头像上传
    handleAvatarSuccess (res, file) {
      this.oldHeadUrl = false;
      this.tempCurrentHeadUrl = URL.createObjectURL(file.raw);// 临时
      this.myForm.currentHeadUrl = res.obj;
    },
    handleAvatarError () {
      this.$message.error('上传头像图片失败!');
    },
    beforeAvatarUpload (file) {
      let isJPG = false;
      if (file.type) {
        const fileTypes = 'image/jpeg;image/png;image/bmp;image/tiff;image/wmf';
        isJPG = fileTypes.indexOf(file.type) !== -1;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/BMP/TIFF/WMF 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
  // 初始化数据
  mounted () {
    this.getFormData();
  }
};
</script>
